<template>
  <div class="doctor-view">
    <!-- 顶部工作站信息头 -->
    <WorkstationHeader workstation-name="医生工作站" :tabs="tabs" :active-tab="activeTab" @tab-change="activeTab = $event" />

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧可折叠信息栏 -->
      <PatientList :patients="{
        myPatients: [
          {
            id: 'P018311',
            name: '张三',
            bedNumber: 'A101',
            admissionDate: '2023-10-15',
            gender: '男',
            age: 45,
            diagnosis: '高血压'
          },
          {
            id: 'P018312',
            name: '李四',
            bedNumber: 'A102',
            admissionDate: '2023-10-16',
            gender: '女',
            age: 38,
            diagnosis: '糖尿病'
          }
        ],
        otherPatients: [
          {
            id: 'P018313',
            name: '王五',
            bedNumber: 'B201',
            admissionDate: '2023-10-17',
            gender: '男',
            age: 52,
            diagnosis: '冠心病'
          },
          {
            id: 'P018314',
            name: '赵六',
            bedNumber: 'B202',
            admissionDate: '2023-10-18',
            gender: '女',
            age: 60,
            diagnosis: '肺炎'
          }
        ]
      }" :reminders="['10:00 查房', '14:00 会诊']" :handovers="['3床需要特殊护理', '5床明日出院']" />

      <!-- 右侧信息展示区 -->
      <main class="content-area">
        <component :is="activeTabComponent" :key="forceUpdate" />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { DefineComponent } from 'vue'
import type { TabItem } from '../components/WorkstationHeader.vue'
import BedManagement from '../components/BedManagement.vue'
import TreatmentCare from '../components/TreatmentCare.vue'
import WorkstationHeader from '../components/WorkstationHeader.vue'
import PatientList from '../components/PatientList.vue'
import { useThemeStore } from '../stores/theme'

const themeStore = useThemeStore()
const forceUpdate = ref(0)

onMounted(() => {
  window.addEventListener('theme-init', () => {
    forceUpdate.value++
  })
})

const tabs: TabItem[] = [
  { id: 'bed', label: '床位管理' },
  { id: 'treatment', label: '诊疗护理' }
]

const activeTab = ref<string>('bed')
const activeTabComponent = computed(() => {
  return activeTab.value === 'bed' ? BedManagement : TreatmentCare
})

</script>

<style scoped>
.doctor-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--bg);
  transition: background-color 0.3s ease;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  background-color: var(--bg);
  transition: background-color 0.3s ease;
}

.content-area {
  flex: 1;
  padding: 0px;
  overflow-y: auto;
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.content-area::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}
</style>
